<template>

  <div class="todo-list">
    <div class="todo">
      <a href="https://gitee.com/ancient-city-xiao/key.s" target="_blank">查看我的gitee仓库</a>

    </div>
    <h2>待办事项列表</h2>


    <TodoForm @add-todo="addTodo" />
    <ul>
      <TodoItem v-for="todo in filteredTodos" :key="todo.id" :todo="todo" @update:todo="updateTodo"
        @remove-todo="removeTodo" />
    </ul>
  </div>

</template>

<script>
import TodoForm from './TodoForm.vue';
import TodoItem from './TodoItem.vue';

export default {
  components: {
    TodoForm,
    TodoItem
  },
  data() {
    return {
      todos: [],
      showAll: true
    };
  },
  computed: {
    filteredTodos() {
      if (this.showAll) {
        return this.todos;
      } else if (this.showCompleted) {
        return this.todos.filter(todo => todo.completed);
      } else {
        return this.todos.filter(todo => !todo.completed);
      }
    },
    showCompleted() {
      return !this.showAll && !this.todos.some(todo => !todo.completed);
    }
  },
  methods: {
    addTodo(todo) {
      this.todos.push({ ...todo, id: Date.now(), completed: false });
    },
    updateTodo(updatedTodo) {
      const index = this.todos.findIndex(todo => todo.id === updatedTodo.id);
      if (index !== -1) {
        this.$set(this.todos, index, updatedTodo);
      }
    },
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id);
    },
    showAllTodos() {
      this.showAll = true;
    },
    showCompletedTodos() {
      this.showAll = false;
    },
    showIncompleteTodos() {
      this.showAll = false;
    }
  }
}  
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #bb4747;
}

.todo-list {
  max-width: 600px;
  margin: 0 auto;
  background-color: #f3a59c;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(211, 121, 121, 0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #f1f1d8;
}

button:last-child {
  margin-right: 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid #ca9393;
}

li:last-child {
  border-bottom: none;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.todo-item .todo-text {
  flex-grow: 1;
}

.todo-item .todo-checkbox {
  margin-right: 10px;
}



.todo-item .todo-remove:hover {
  text-decoration: underline;
}



a {
  display: block;
  text-align: center;
  margin-bottom: 20px;
  text-decoration: none;
  color: #7364e7;
  font-weight: bold;
  transition: color 0.3s ease;
}

a:hover {
  color: #45a049;
}
</style>
